<template>
  <div>
    <el-row :gutter="20" class="rowone">
      <el-col :span="8" :offset="0">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <!-- card body -->
          <div class="chart"> 今天天气晴朗 </div>
        </el-card>
      </el-col>
      <el-col :span="8" :offset="0">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <!-- 第一个图 -->
          <div class="chart" ref="pieRef"></div>
        </el-card>
      </el-col>
      <el-col :span="8" :offset="0">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <!-- 第二个图 -->
          <div class="chart" ref="barRefthree"></div>
        </el-card>
      </el-col>
    </el-row>
    <!-- 下面是第二行 ----------------------------------------------------------------------------------->
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <!-- 第一个图 -->
          <div class="chart" ref="barRefone"></div>
        </el-card>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <!-- 第二个图 -->
          <div class="chart" ref="barReftwo"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'
import barone from './zoondash/barone'
import bartwo from './zoondash/bartwo'
import barthree from './zoondash/barthree'
import pie from './zoondash/pie'

// import { ZoonGet } from '../../api/zoon/index'

const barRefthree = ref<HTMLDivElement | null>(null)
const barRefone = ref<HTMLDivElement | null>(null)
const barReftwo = ref<HTMLDivElement | null>(null)
const pieRef = ref<HTMLDivElement | null>(null)

onMounted(async () => {
  // 基于准备好的dom，初始化echarts实例

  // 绘制图表-横
  var mybarRefthree = echarts.init(barRefthree.value)
  mybarRefthree.setOption(barthree)

  // 绘制图表1
  var myChartone = echarts.init(barRefone.value)
  myChartone.setOption(barone)

  // 绘制图表2
  var myCharttwo = echarts.init(barReftwo.value)
  myCharttwo.setOption(bartwo)

  // 绘制饼状图
  var mypieRef = echarts.init(pieRef.value)
  // let res = await ZoonGet()
  // console.log(res)
  // let { sex } = res.data.results[0].sex
  // pie.series[0].data = sex
  mypieRef.setOption(pie)
})
</script>

<style scoped>
.chart {
  height: 320px;
}

.rowone {
  margin-bottom: 20px;
}
</style>
